<template>
  <el-form-item :label="item" v-for="item in props.keyList" :key="item">
    <el-select
      v-model="paramsMap[item]"
      placeholder="选择映射字段"
      :teleported="false"
      clearable
    >
      <el-option
        v-for="item in props.mapFields"
        :key="item"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
type PropsType = {
  mapFields: any[];
  keyList?: any[];
  params: any;
};
let props = withDefaults(defineProps<PropsType>(), {
  mapFields: () => [],
  keys: () => [],
  params: () => {},
});
let emit = defineEmits(["update:params"]);
let paramsMap = computed({
  get() {
    return props.params;
  },
  set(val) {
    emit("update:params", val);
  },
});

// let fields = computed(() => {
//   return props.mapFields.map((it) => it.value);
// });
</script>

<style scoped lang="scss">
:deep(.el-form-item__label) {
  width: 90px !important;
  display: block;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
</style>
